<template>
    <section :class="cns" :style="cstyle"><slot></slot></section>
</template>
<script lang="ts">
import { defineComponent , computed } from 'vue'
export default defineComponent({
    props:{
        wrap:{
            type:Boolean,
            default:false
        },
        dir:{type:String},
        flex:{
            type:String
        },
        justify:{
            type:String,
        },
        items:{
            type:String,
        },
        padding:{
            type:[String,Number],
        },
        margin:{
            type:[String,Number],
        },
        overflow:{
            type:String
        },
        width:{
            type:String
        },
        height:{
            type:String
        },
        bg:{type:String}
    },
    setup(props) {
        const cns = computed(()=>{
            const tmp = {
                "ph-flex":true,
                "ph-flex-row":props.dir==="row",
                "ph-flex-col":props.dir==="col",
                "ph-flex-wrap":props.wrap
            } as {[k:string]:string|boolean}
            return tmp
        })
        const cstyle = computed(()=>{
            const tmp:{[k:string]:string|number} = {}
            if(props.margin)
                tmp.margin = props.margin
            if(props.padding)
                tmp.padding = props.padding
            if(props.flex)
                tmp.flex = props.flex
            if(props.bg)
                tmp.backgroundColor = props.bg
            if(props.width)
                tmp.width=props.width
            if(props.height)
                tmp.height=props.height
            if(props.justify)
                tmp['--ph-flex-justify']=props.justify
            if(props.items)
                tmp['--ph-flex-items']=props.items
            if(props.overflow)
                tmp['--ph-flex-overflow']=props.overflow
            return tmp
        })

        return { cns , cstyle }
    },
})
</script>
<style lang="scss">
    .ph-flex{
        --ph-overflow:visible;
        --ph-flex-justify:flex-start;
        --ph-flex-items:flex-start;
        display:flex;
        flex:1;
        position: relative;
        overflow: var(--ph-overflow);
        justify-content: var(--ph-flex-justify);
        align-items: var(--ph-flex-items);
        width: 100%;
        &-wrap{
            flex-wrap: wrap;
        }
        &-row{
            flex-direction: row;
        }
        &-col{
            flex-direction: column;
            align-items: flex-start;
        }
    }
</style>
